<template>
  <van-tabbar v-model="active">
    <van-tabbar-item replace
                     to="/home">
      <span>首页</span>
      <template #icon>
        <svg-icon iconClass="home" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item>
      <span>报名</span>
      <template #icon>
        <svg-icon iconClass="enter" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item badge="30">
      <span>消息</span>
      <template #icon>
        <svg-icon iconClass="msg" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item>
      <span>考试</span>
      <template #icon>
        <svg-icon iconClass="exam" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace
                     to="/my">
      <span>我的</span>
      <template #icon>
        <svg-icon iconClass="my" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'Footer',
  props: {
    activeValue: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      active: this.activeValue
    }
  }
}
</script>

<style scoped lang="stylus">
svg
  width 1.2em
  height 1.2em
  fill currentColor
span
  font-weight bold
.van-tabbar-item>:first-child
  margin-bottom 0
</style>
